<template>
  <div class="">
    <!-- 数据图表 -->
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card>
          <div style="width: 100%; height: 500px" id="bar"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin: 10px 0">
      <el-col :span="12">
        <el-card>
          <div style="width: 100%; height: 400px" id="tie1"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div style="width: 100%; height: 400px" id="tie2"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

let barOption = {
  title: {
    text: '产地产物统计',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  // legend: {
  //   orient: 'vertical',
  //   left: 'right'
  // },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      interval: 0
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name: '产物数量',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'bar'
    }
  ]
}

let tieOption1 = {
  title: {
    text: '产物分类比例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '产物数量',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

let tieOption2 = {
  title: {
    text: '仓库现存产物数量比例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '产物数量',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

export default {
  name: 'Charts',
  data() {
    return {
      goodsData: [],
      goodstypeData: [],
      sourceData: [],
      storageData: []
    }
  },
  mounted() {
    // 请求数据
    Promise.all([
      this.loadGoods(),
      this.loadGoodstype(),
      this.loadSource(),
      this.loadStorage()
    ]).then(() => this.initCharts())
  },
  methods: {
    // 初始化 echarts 图表
    initCharts() {
      // console.log('111', this.sourceData)
      // 用请求回来的数据替换 option 内的静态数据
      barOption.yAxis.data = this.sourceData.map(v => v.sourceName)
      barOption.series[0].data = this.sourceData.map(
        v => this.goodsData.filter(goods => goods.sourceId === v.id).length
      )

      tieOption1.series[0].data = this.goodstypeData.map(v => {
        return {
          value: this.goodsData.filter(goods => goods.goodsTypeId === v.id)
            .length,
          name: v.goodsTypeName
        }
      })

      tieOption2.series[0].data = this.storageData.map(v => {
        return {
          value: this.goodsData.filter(goods => goods.storageId === v.id)
            .length,
          name: v.storageName
        }
      })

      let barDom = document.getElementById('bar')
      let tie1Dom = document.getElementById('tie1')
      let tie2Dom = document.getElementById('tie2')

      let barChart = echarts.init(barDom)
      let tie1Chart = echarts.init(tie1Dom)
      let tie2Chart = echarts.init(tie2Dom)

      barChart.setOption(barOption)
      tie1Chart.setOption(tieOption1)
      tie2Chart.setOption(tieOption2)
    },
    loadGoods() {
      return this.$http
        .get('/goods/list?goodsName=&goodsTypeId=&sourceId=')
        .then(res => {
          console.log('获取到的产物数据为：', res)
          if (res.code == 200) {
            this.goodsData = res.data
          } else {
            this.$message.error('获取数据失败！')
          }
        })
    },
    loadGoodstype() {
      return this.$http.get('/goodstype/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.goodstypeData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    },
    loadSource() {
      return this.$http.get('/source/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.sourceData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    },
    loadStorage() {
      return this.$http.get('/storage/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.storageData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    }
  }
}
</script>

<style scoped></style>
